<template>
  <view class="template-activity tn-safe-area-inset-bottom">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed alpha customBack>
    	<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
    		<text class='icon tn-icon-left'></text>
    	</view>
    </tn-nav-bar>
    
    <!-- 活动轮播图 -->
    <swiper class="card-swiper" :circular="true" :autoplay="true" duration="500" interval="5000" @change="cardSwiper"> 
      <swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
        <view class="swiper-item image-banner">
          <image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
        </view>
      </swiper-item>
    </swiper>
    <view class="indication">
        <block v-for="(item,index) in swiperList" :key="index">
            <view class="spot" :class="cardCur==index?'active':''"></view>
        </block>
    </view>
    
    <!-- 活动基础信息 -->
    <view class="tn-margin">
      <view class="tn-flex tn-flex-row-between">
        <view class="justify-content-item tn-text-bold tn-text-xxl">
          2024届吉林农科院校友返校日活动
        </view>
      </view>
      <view class="tn-flex tn-flex-row-between tn-margin-top">
        <!-- 活动状态标签 -->
        <view class="justify-content-item tn-text-bold tn-bg-green--light tn-color-green tn-padding-xs tn-round">
          未开始
        </view>
        <!-- 参与人数 -->
        <view class="justify-content-item tn-color-gray tn-padding-top-xs">
          <view class="">已报名 238 人</view>
        </view>
      </view>
    </view>
    
    <!-- 边距间隔 -->
    <view class="tn-strip-bottom"></view>
    
    
    <!-- 活动核心信息 -->
    <view class="tn-padding-top-sm tn-padding-bottom-sm">
      <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="34">
        <view class="tn-flex tn-flex-col-center">
          <view class="tn-flex-1">活动时间</view>
          <view class="tn-margin-left-sm" style="font-size: 28rpx;">2024-06-15 至 2024-06-16</view>
        </view>
      </tn-list-cell>
      <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="34">
        <view class="tn-flex tn-flex-col-center">
          <view class="tn-flex-1">活动地点</view>
          <view class="tn-margin-left-sm" style="font-size: 28rpx;">吉林农科院东校区（体育馆+学术报告厅）</view>
        </view>
      </tn-list-cell>
      <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="34">
        <view class="tn-flex tn-flex-col-center">
          <view class="tn-flex-1">活动费用</view>
          <view class="tn-margin-left-sm" style="font-size: 28rpx;">免费（含餐饮、纪念品）</view>
        </view>
      </tn-list-cell>
      <tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="34">
        <view class="tn-flex tn-flex-col-center">
          <view class="tn-flex-1">报名截止</view>
          <view class="tn-margin-left-sm" style="font-size: 28rpx;">2024-06-08 23:59</view>
        </view>
      </tn-list-cell>
    </view>
    
    
    <!-- 边距间隔 -->
    <view class="tn-strip-bottom"></view>
    
    <view class="tn-margin">
      <view class="tn-flex tn-flex-row-between">
        <view class="justify-content-item tn-text-bold tn-text-xl">
          活动标签
        </view>
      </view>
    </view>
    
    <view class="">
      <view class="tn-tag-content tn-margin tn-text-justify">
        <view v-for="(item, index) in tagList" :key="index" class="tn-tag-content__item tn-margin-right tn-round tn-text-sm tn-text-bold" :class="[`tn-bg-${item.color}--light tn-color-${item.color}`]">
          <text class="tn-tag-content__item--prefix">#</text> {{ item.title }}
        </view>
      </view>
    </view>
    
    <!-- 边距间隔 -->
    <view class="tn-strip-bottom"></view>

    
    <view class="tn-margin">
      <view class="tn-flex tn-flex-row-between">
        <view class="justify-content-item tn-text-bold tn-text-xl">
          活动详情
        </view>
      </view>
    </view>
    
    <view class="content-backgroup tn-margin">
      <!-- 活动详情描述 -->
      <view class="activity-detail tn-padding-sm tn-bg-white tn-round">
        <view class="detail-section tn-margin-bottom-sm">
          <view class="section-title tn-text-bold tn-text-lg tn-margin-bottom-xs">一、活动背景</view>
          <view class="section-content tn-text-base tn-color-gray-700 tn-line-height-lg">
            为加强2024届校友与母校的联系，增进校友间的交流合作，传承吉林农科院“厚德笃行、精技强农”的校训精神，特举办本次校友返校日活动，诚邀全体2024届校友重返校园，共忆求学时光，共话发展未来。
          </view>
        </view>
        
        <view class="detail-section tn-margin-bottom-sm">
          <view class="section-title tn-text-bold tn-text-lg tn-margin-bottom-xs">二、活动流程</view>
          <view class="section-content tn-text-base tn-color-gray-700 tn-line-height-lg">
            1. 6月15日 09:00-10:00 校友签到（东校区校门口，领取活动手册及纪念品）<br>
            2. 10:00-11:30 校园参观（由学生志愿者带队，参观新实验楼、图书馆、校友林等）<br>
            3. 11:30-13:30 校友午餐会（体育馆一楼餐厅，自助形式）<br>
            4. 14:00-15:30 校友情谊座谈会（学术报告厅，校领导、教师代表及校友代表发言）<br>
            5. 15:30-17:00 行业交流分会场（按农业种植、食品加工、乡村振兴等方向分组讨论）<br>
            6. 17:30-19:30 校友晚宴（体育馆二楼宴会厅）<br>
            7. 6月16日 09:00-11:00 校友企业招聘专场（面向在校学生，校友企业现场宣讲招聘）<br>
            8. 11:00-11:30 活动总结与合影（校门口校训石前）
          </view>
        </view>
        
        <view class="detail-section tn-margin-bottom-sm">
          <view class="section-title tn-text-bold tn-text-lg tn-margin-bottom-xs">三、报名须知</view>
          <view class="section-content tn-text-base tn-color-gray-700 tn-line-height-lg">
            1. 本次活动仅限2024届吉林农科院毕业生参与，报名时需填写身份证号、毕业证编号（用于身份核验）<br>
            2. 如需携带家属（限1-2人），请在报名时备注家属姓名及关系，家属无需额外缴费<br>
            3. 活动期间统一安排校内住宿（6月15日晚），如需住宿请在报名时勾选“住宿需求”<br>
            4. 请于6月8日前完成报名，逾期将关闭报名通道，报名成功后将收到短信确认通知<br>
            5. 活动联系人：李老师 138XXXX5678；咨询邮箱：xyh@jlnykj.edu.cn
          </view>
        </view>
        
        <view class="detail-section">
          <view class="section-title tn-text-bold tn-text-lg tn-margin-bottom-xs">四、温馨提示</view>
          <view class="section-content tn-text-base tn-color-gray-700 tn-line-height-lg">
            1. 建议穿着商务休闲装，便于活动交流及合影留念<br>
            2. 活动期间请遵守校园管理规定，爱护校园环境<br>
            3. 如有特殊饮食需求（如素食、过敏忌口），请在报名时备注<br>
            4. 可携带个人简历参与6月16日招聘专场，部分校友企业可现场安排面试
          </view>
        </view>
      </view>
    </view>
    
    <!-- 边距间隔 -->
    <view class="tn-strip-bottom"></view>
    
    <!-- 活动组织方信息 -->
    <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin">
      <!-- 组织方信息区域点击跳转保持不变（跳转到activityOrg页面） -->
      <view class="justify-content-item" @click="tn('/preferredPages/activityOrg')">
        <view class="tn-flex tn-flex-col-center tn-flex-row-left">
          <view class="logo-pic tn-shadow">
            <view class="logo-image">
              <view class="tn-shadow-blur" style="background-image:url('https://resource.tuniaokj.com/images/blogger/avatar_school.jpg');width: 110rpx;height: 110rpx;background-size: cover;border-radius: 50%;">
              </view>
            </view>
          </view>
          <view class="tn-padding-right tn-color-black">
            <view class="tn-padding-right tn-padding-left-sm tn-text-xl tn-text-bold">
              吉林农科院校友会
            </view>
            <view class="tn-padding-right tn-padding-top-xs tn-text-ellipsis tn-padding-left-sm">
              <text class="tn-color-gray tn-text-sm">已举办活动 12 场 · 累计参与 3200+ 人</text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 更多按钮点击事件修改为跳转到circlePages/hdmore并传递ID -->
      <view class="justify-content-item tn-flex-row-center">
        <view class="tn-cool-bg-color-15 tn-padding-xs tn-color-white tn-round tn-shadow-blur" 
              @click="goToHdMore">
          <text class="tn-padding-left-xs">更多</text>
          <text class="tn-icon-send-fill tn-padding-xs"></text>
        </view>
      </view>
    </view>
    
    
    <!-- 边距间隔 -->
    <view class="tn-strip-bottom"></view>
    
    <view class="tn-margin-top-sm">
      <tn-sticky :offsetTop="10" :customNavHeight="vuex_custom_bar_height">
        <tn-tabs :list="fixedList" :current="current" :isScroll="false" activeColor="#000" bold="true" :fontSize="32" :badgeOffset="[20, 50]" @change="tabChange"></tn-tabs>
      </tn-sticky>
    </view>
   
    
    <!-- 同类型活动 -->
    <view class="" v-if="current==0">
      <view class="">
        <view class="nav_title--wrap">
          <view class="nav_title tn-cool-bg-color-15">
            <text class="tn-icon-relation tn-padding-right-sm tn-text-xxl"></text>
            <text class="tn-text-xl">相关活动 · 返校交流</text>
            <text class="tn-icon-relation tn-padding-left-sm tn-text-xxl"></text>
          </view>
        </view>
      </view> 
      
      <!-- 相关活动列表 -->
      <view class="tn-flex tn-flex-wrap tn-margin-sm">
        <block v-for="(item, index) in content" :key="index">
          <view class="" style="width: 50%;" @click="tn('/preferredPages/activityDetail', {id: item.id})">
            <view class="tn-blogger-content__wrap">
              <view class="image-picbook" :style="'background-image:url(' + item.mainImage + ')'">
                <view class="image-book">
                  <!-- 活动状态标签 -->
                  <view :class="item.status=='upcoming'?'tn-bg-green--light tn-color-white':'tn-bg-gray--light tn-color-white'" style="position: absolute;top: 10rpx;left: 10rpx;padding: 4rpx 12rpx;border-radius: 16rpx;font-size: 22rpx;">
                    {{ item.status=='upcoming'?'未开始':'已结束' }}
                  </view>
                </view>
              </view> 
              
              <view class="tn-blogger-content__label tn-text-justify tn-padding-sm">
                <text class="tn-blogger-content__label__desc tn-line-clamp-2">{{ item.desc }}</text>  
              </view>
              
              <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-left-sm tn-padding-right-sm tn-padding-bottom-sm">
                <view class="justify-content-item tn-flex tn-flex-col-center">
                  <view>
                    <view class="">
                      <text class="tn-icon-calendar tn-color-gray tn-text-sm" style="font-size: 24rpx;"></text>
                      <text class="tn-color-gray tn-text-sm" style="font-size: 24rpx;">{{ item.dateRange }}</text>
                      <text class="tn-block tn-margin-top-xs tn-icon-map tn-color-gray tn-text-sm" style="font-size: 24rpx;"></text>
                      <text class="tn-color-gray tn-text-sm" style="font-size: 24rpx;">{{ item.location }}</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </block>
      </view>
    </view>
    
    <!-- 近期活动 -->
    <view class="" v-if="current==1">
      <view class="">
        <view class="nav_title--wrap">
          <view class="nav_title tn-cool-bg-color-10">
            <text class="tn-icon-relation tn-padding-right-sm tn-text-xxl"></text>
            <text class="tn-text-xl">相关活动 · 近期举办</text>
            <text class="tn-icon-relation tn-padding-left-sm tn-text-xxl"></text>
          </view>
        </view>
      </view>
      
      <!-- 近期活动列表 -->
      <view class="tn-flex tn-flex-wrap tn-margin-sm">
        <block v-for="(item, index) in content2" :key="index">
          <view class="" style="width: 50%;" @click="tn('/preferredPages/activityDetail', {id: item.id})">
            <view class="tn-blogger-content__wrap">
              <view class="image-picbook" :style="'background-image:url(' + item.mainImage + ')'">
                <view class="image-book">
                  <view :class="item.status=='upcoming'?'tn-bg-green--light tn-color-white':'tn-bg-gray--light tn-color-white'" style="position: absolute;top: 10rpx;left: 10rpx;padding: 4rpx 12rpx;border-radius: 16rpx;font-size: 22rpx;">
                    {{ item.status=='upcoming'?'未开始':'已结束' }}
                  </view>
                </view>
              </view> 
              
              <view class="tn-blogger-content__label tn-text-justify tn-padding-sm">
                <text class="tn-blogger-content__label__desc tn-line-clamp-2">{{ item.desc }}</text>  
              </view>
              
              <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-left-sm tn-padding-right-sm tn-padding-bottom-sm">
                <view class="justify-content-item tn-flex tn-flex-col-center">
                  <view>
                    <view class="">
                      <text class="tn-icon-calendar tn-color-gray tn-text-sm" style="font-size: 24rpx;"></text>
                      <text class="tn-color-gray tn-text-sm" style="font-size: 24rpx;">{{ item.dateRange }}</text>
                      <text class="tn-block tn-margin-top-xs tn-icon-map tn-color-gray tn-text-sm" style="font-size: 24rpx;"></text>
                      <text class="tn-color-gray tn-text-sm" style="font-size: 24rpx;">{{ item.location }}</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </block>
      </view>
    </view>
    
    <!-- 热门活动 -->
    <view class="" v-if="current==2">
      <view class="">
        <view class="nav_title--wrap">
          <view class="nav_title tn-cool-bg-color-6">
            <text class="tn-icon-relation tn-padding-right-sm tn-text-xxl"></text>
            <text class="tn-text-xl">相关活动 · 热门推荐</text>
            <text class="tn-icon-relation tn-padding-left-sm tn-text-xxl"></text>
          </view>
        </view>
      </view> 
      
      <!-- 热门活动列表 -->
      <view class="tn-flex tn-flex-wrap tn-margin-sm">
        <block v-for="(item, index) in content3" :key="index">
          <view class="" style="width: 50%;" @click="tn('/preferredPages/activityDetail', {id: item.id})">
            <view class="tn-blogger-content__wrap">
              <view class="image-picbook" :style="'background-image:url(' + item.mainImage + ')'">
                <view class="image-book">
                  <view :class="item.status=='upcoming'?'tn-bg-green--light tn-color-white':'tn-bg-gray--light tn-color-white'" style="position: absolute;top: 10rpx;left: 10rpx;padding: 4rpx 12rpx;border-radius: 16rpx;font-size: 22rpx;">
                    {{ item.status=='upcoming'?'未开始':'已结束' }}
                  </view>
                </view>
              </view> 
              
              <view class="tn-blogger-content__label tn-text-justify tn-padding-sm">
                <text class="tn-blogger-content__label__desc tn-line-clamp-2">{{ item.desc }}</text>  
              </view>
              
              <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-left-sm tn-padding-right-sm tn-padding-bottom-sm">
                <view class="justify-content-item tn-flex tn-flex-col-center">
                  <view>
                    <view class="">
                      <text class="tn-icon-calendar tn-color-gray tn-text-sm" style="font-size: 24rpx;"></text>
                      <text class="tn-color-gray tn-text-sm" style="font-size: 24rpx;">{{ item.dateRange }}</text>
                      <text class="tn-block tn-margin-top-xs tn-icon-map tn-color-gray tn-text-sm" style="font-size: 24rpx;"></text>
                      <text class="tn-color-gray tn-text-sm" style="font-size: 24rpx;">{{ item.location }}</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </block>
      </view>
    </view>
    
    <!-- 行业交流活动 -->
    <view class="" v-if="current==3">
      <view class="">
        <view class="nav_title--wrap">
          <view class="nav_title tn-cool-bg-color-2">
            <text class="tn-icon-relation tn-padding-right-sm tn-text-xxl"></text>
            <text class="tn-text-xl">相关活动 · 行业交流</text>
            <text class="tn-icon-relation tn-padding-left-sm tn-text-xxl"></text>
          </view>
        </view>
      </view> 
      
      <!-- 行业交流活动列表 -->
      <view class="tn-flex tn-flex-wrap tn-margin-sm">
        <block v-for="(item, index) in content4" :key="index">
          <view class="" style="width: 50%;" @click="tn('/preferredPages/activityDetail', {id: item.id})">
            <view class="tn-blogger-content__wrap">
              <view class="image-picbook" :style="'background-image:url(' + item.mainImage + ')'">
                <view class="image-book">
                  <view :class="item.status=='upcoming'?'tn-bg-green--light tn-color-white':'tn-bg-gray--light tn-color-white'" style="position: absolute;top: 10rpx;left: 10rpx;padding: 4rpx 12rpx;border-radius: 16rpx;font-size: 22rpx;">
                    {{ item.status=='upcoming'?'未开始':'已结束' }}
                  </view>
                </view>
              </view> 
              
              <view class="tn-blogger-content__label tn-text-justify tn-padding-sm">
                <text class="tn-blogger-content__label__desc tn-line-clamp-2">{{ item.desc }}</text>  
              </view>
              
              <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-padding-left-sm tn-padding-right-sm tn-padding-bottom-sm">
                <view class="justify-content-item tn-flex tn-flex-col-center">
                  <view>
                    <view class="">
                      <text class="tn-icon-calendar tn-color-gray tn-text-sm" style="font-size: 24rpx;"></text>
                      <text class="tn-color-gray tn-text-sm" style="font-size: 24rpx;">{{ item.dateRange }}</text>
                      <text class="tn-block tn-margin-top-xs tn-icon-map tn-color-gray tn-text-sm" style="font-size: 24rpx;"></text>
                      <text class="tn-color-gray tn-text-sm" style="font-size: 24rpx;">{{ item.location }}</text>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </block>
      </view>
    </view>
    
    
    <!-- 底部操作按钮（已删除咨询详情按钮） -->
    <view class="footerfixed dd-glass tn-padding-left-sm tn-padding-right tn-padding-top-xs tn-padding-bottom-sm">
      <tn-goods-nav :options="countOptions" :buttonGroups="customButtonGroups" buttonType="round" :safeAreaInsetBottom="true" @optionClick="onOptionClick" @buttonClick="onButtonClick"></tn-goods-nav>
    </view>
    
    <view class='tn-tabbar-height'></view>
    
  </view>
</template>

<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  export default {
    name: 'TemplateActivity',
    mixins: [template_page_mixin],
    data(){
      return {
        cardCur: 0,
        swiperList: [{
          id: 0,
          type: 'image',
          title: '校友返校活动',
          name: '吉林农科院2024届校友聚会',
          text: '期待您的参与',
          url: '/static/hd4.jpg',
        }, {
          id: 1,
          type: 'image',
          title: '校园风光',
          name: '母校新貌展示',
          text: '新实验楼与图书馆',
          url: '/static/hd1.png',
        }, {
          id: 2,
          type: 'image',
          title: '校友交流',
          name: '行业精英分享会',
          text: '共话农业发展新机遇',
          url: '/static/hd7.jpg',
        }, {
          id: 3,
          type: 'image',
          title: '活动晚宴',
          name: '校友情谊晚宴',
          text: '重温校园时光',
          url: '/static/hd6.png',
        }],
        current: 0,
        fixedList: [
          {name: '返校交流'},
          {name: '近期活动'},
          {name: '热门推荐', count: '99+'},
          {name: '行业交流'}
        ],
        // 同类型活动数据
        content: [
          {
            id: 101,
            desc: '2023届吉林农科院毕业生返校日',
            mainImage: '/static/hd2.png',
            dateRange: '2023-10-21 至 2023-10-22',
            location: '吉林农科院西校区',
            status: 'completed'
          },
          {
            id: 102,
            desc: '长春地区校友春季联谊会',
            mainImage: '/static/hd5.png',
            dateRange: '2024-04-15',
            location: '长春市农业展览馆',
            status: 'upcoming'
          },
          {
            id: 103,
            desc: '吉林农科院北京校友分会年度聚会',
            mainImage: '/static/hd3.png',
            dateRange: '2024-05-20',
            location: '北京农业科技园',
            status: 'upcoming'
          },
          {
            id: 104,
            desc: '2022届校友毕业两周年返校活动',
            mainImage: '/static/hd5.png',
            dateRange: '2024-06-30 至 2024-07-01',
            location: '吉林农科院东校区',
            status: 'upcoming'
          }
        ],
        // 近期活动数据
        content2: [
          {
            id: 201,
            desc: '2024吉林省农业产业发展论坛',
            mainImage: '/static/hd5.png',
            dateRange: '2024-06-10',
            location: '吉林省国际会展中心',
            status: 'upcoming'
          },
          {
            id: 202,
            desc: '吉林农科院杰出校友事迹分享会',
            mainImage: '/static/hd6.png',
            dateRange: '2024-06-18',
            location: '农科院学术报告厅',
            status: 'upcoming'
          },
          {
            id: 203,
            desc: '乡村振兴战略校友研讨会',
            mainImage: '/static/hd1.png',
            dateRange: '2024-06-25',
            location: '吉林省农业农村厅会议室',
            status: 'upcoming'
          },
          {
            id: 204,
            desc: '校友企业校园招聘会',
            mainImage: 'https://resource.tuniaokj.com/images/activity/activity8.jpg',
            dateRange: '2024-07-05',
            location: '农科院体育馆',
            status: 'upcoming'
          }
        ],
        // 热门活动数据
        content3: [
          {
            id: 301,
            desc: '全国农业科技创新论坛',
            mainImage: 'https://resource.tuniaokj.com/images/activity/activity9.jpg',
            dateRange: '2024-07-10 至 2024-07-12',
            location: '长春国际会议中心',
            status: 'upcoming'
          },
          {
            id: 302,
            desc: '吉林农科院建校70周年筹备会',
            mainImage: 'https://resource.tuniaokj.com/images/activity/activity10.jpg',
            dateRange: '2024-06-20',
            location: '农科院行政楼会议室',
            status: 'upcoming'
          },
          {
            id: 303,
            desc: '校友创业项目路演会',
            mainImage: 'https://resource.tuniaokj.com/images/activity/activity11.jpg',
            dateRange: '2024-06-28',
            location: '吉林省大学生创业园',
            status: 'upcoming'
          },
          {
            id: 304,
            desc: '农业种植技术交流会',
            mainImage: 'https://resource.tuniaokj.com/images/activity/activity12.jpg',
            dateRange: '2024-07-08',
            location: '农科院实验基地',
            status: 'upcoming'
          }
        ],
        // 行业交流活动数据
        content4: [
          {
            id: 401,
            desc: '2024东北玉米产业发展论坛',
            mainImage: 'https://resource.tuniaokj.com/images/activity/activity13.jpg',
            dateRange: '2024-08-15 至 2024-08-16',
            location: '长春市国际会展中心',
            status: 'upcoming'
          },
          {
            id: 402,
            desc: '现代农业机械化技术研讨会',
            mainImage: 'https://resource.tuniaokj.com/images/activity/activity14.jpg',
            dateRange: '2024-07-20',
            location: '吉林省农业机械研究所',
            status: 'upcoming'
          },
          {
            id: 403,
            desc: '农产品深加工与品牌建设论坛',
            mainImage: 'https://resource.tuniaokj.com/images/activity/activity15.jpg',
            dateRange: '2024-09-05 至 2024-09-06',
            location: '吉林市国际会议中心',
            status: 'upcoming'
          },
          {
            id: 404,
            desc: '智慧农业与数字乡村建设峰会',
            mainImage: 'https://resource.tuniaokj.com/images/activity/activity16.jpg',
            dateRange: '2024-08-25',
            location: '长春市净月潭国际会议中心',
            status: 'upcoming'
          }
        ],
        // 底部操作按钮
        countOptions: [{
          icon: 'star',
          text: '收藏活动'
        },{
          icon: 'share-circle',
          text: '分享活动',
        }],
        // 已删除咨询详情按钮，仅保留立即报名
        customButtonGroups: [{
          text: '立即报名',
          backgroundColor: 'tn-cool-bg-color-15--reverse',
          color: '#FFFFFF'
        }],
        // 活动标签
        tagList: [
          {
            color: 'red',
            title: "校友聚会",
          },
          {
            color: 'cyan',
            title: "校园活动",
          },
          {
            color: 'blue',
            title: "农业交流",
          },
          {
            color: 'green',
            title: "免费参与",
          },
          {
            color: 'orange',
            title: "吉林省",
          },
          {
            color: 'purplered',
            title: "毕业校友",
          },
          {
            color: 'purple',
            title: "行业交流",
          },
          {
            color: 'brown',
            title: "校园参观",
          }
        ],
      }
    },
    methods: {
		 // 跳转到更多活动页面（circlePages/hdmore）
		  // 跳转到更多活动页面（circlePages/hdmore）
		  goToHdMore() {
		    // 注意：这里需要传递的是组织ID（orgId），而非活动ID（activityId）
		    // 请将下面的 orgId 值替换为实际的组织ID（例如从当前页面数据中获取）
		    const orgId = 1; // 示例：吉林农科院校友会的组织ID
		    
		    uni.navigateTo({
		      url: `/circlePages/hdmore?orgId=${orgId}`  // 传递组织ID参数
		    });
		  },
      // 轮播图切换
      cardSwiper(e) {
        this.cardCur = e.detail.current
      },
      // 页面跳转
      tn(url, params) {
        let query = ''
        if (params) {
          Object.keys(params).forEach(key => {
            query += `${key}=${params[key]}&`
          })
          query = query.slice(0, -1)
          url += `?${query}`
        }
      	uni.navigateTo({
      		url: url,
      	});
      },
      // tab选项卡切换
      tabChange(index) {
        this.current = index
      },
      // 底部操作按钮点击
      onOptionClick(e) {
        if (e.index === 0) {
          // 收藏活动
          uni.showToast({
            title: '已收藏活动',
            icon: 'success'
          })
        } else if (e.index === 1) {
          // 分享活动
          uni.showToast({
            title: '分享功能待开发',
            icon: 'none'
          })
        }
      },
      onButtonClick(e) {
        // 仅保留立即报名逻辑
        this.tn('/preferredPages/activitySignUp')
      }
    }
  }
</script>

<style lang="scss" scoped>
  .template-activity{
  }
  .tn-tabbar-height {
  	min-height: 120rpx;
  	height: calc(140rpx + env(safe-area-inset-bottom) / 2);
  }
  
  /* 活动详情样式 */
  .activity-detail {
    .detail-section {
      .section-title {
        color: #333;
      }
      .section-content {
        text-align: justify;
        line-height: 1.5;
		font-size: 26rpx;
		text-align: center;
      }
    }
  }
  
  /* 组织方头像样式 */
  .logo-image {
    width: 110rpx;
    height: 110rpx;
    position: relative;
  }
  
  .logo-pic {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
    border-radius: 10rpx;
    overflow: hidden;
  }
  
/* 自定义导航栏返回按钮样式 */
.tn-custom-nav-bar__back {
	width: 60%;
	height: 100%;
	position: relative;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	box-sizing: border-box;
	background-color: rgba(0, 0, 0, 0.15);
	border-radius: 1000rpx;
	border: 1rpx solid rgba(255, 255, 255, 0.5);
	color: #FFFFFF;
	line-height: 1.5;
	font-size: 26rpx;
	text-align: center;

	.icon {
		display: block;
		flex: 1;
		margin: auto;
		text-align: center;
	}
}
  
  /* 轮播图样式 */
  .card-swiper {
    height: 750rpx !important;
  }
    
  .card-swiper swiper-item {
    width: 750rpx !important;
    left: 0rpx;
    box-sizing: border-box;
    overflow: initial;
  }
    
  .card-swiper swiper-item .swiper-item {
    width: 100%;
    display: block;
    height: 100%;
    transform: scale(1);
    transition: all 0.2s ease-in 0s;
    overflow: hidden;
  }
    
  .card-swiper swiper-item.cur .swiper-item {
    transform: none;
    transition: all 0.2s ease-in 0s;
  }
  
  .image-banner{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .image-banner image{
    width: 100%;
    height: 100%;
  }
  
  /* 轮播指示点 */
  .indication{
    z-index: 9999;
    width: 100%;
    height: 36rpx;
    position: absolute;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
  }
  
  .spot{
    background-color: #FFFFFF;
    opacity: 0.6;
    width: 10rpx;
    height: 10rpx;
    border-radius: 20rpx;
    top: -60rpx;
    margin: 0 8rpx !important;
    position: relative;
  }
  
  .spot.active{
    opacity: 1;
    width: 30rpx;
    background-color: #FFFFFF;
  }
  
  /* 间隔线 */
  .tn-strip-bottom-min {
    width: 100%;
    border-bottom: 1rpx solid #F8F9FB;
  }
  
  .tn-strip-bottom {
   width: 100%;
   border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
  }
  
  /* 标题样式 */
  .nav_title {
    -webkit-background-clip: text;
    color: transparent;
    
    &--wrap {
      position: relative;
      display: flex;
      height: 120rpx;
      font-size: 46rpx;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      background-image: url(https://resource.tuniaokj.com/images/title_bg/title44.png);
      background-size: cover;
    }
  }
  
  /* 底部操作栏 */
  .footerfixed{
   position: fixed;
   width: 100%;
   bottom: 0;
   z-index: 999;
   background-color: #FFFFFF;
   box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0, 0, 0, 0.07);
  }
  
  /* 标签内容 */
  .tn-tag-content {
    &__item {
      display: inline-block;
      line-height: 45rpx;
      padding: 10rpx 30rpx;
      margin: 20rpx 20rpx 5rpx 0rpx;
      
      &--prefix {
        padding-right: 10rpx;
      }  
    }
  }
  
  /* 内容区域 */
  .content-backgroup {
    z-index: -1;
  }
  
  /* 活动列表样式 */
  .tn-blogger-content {
    &__wrap {
      box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
      border-radius: 20rpx;
      margin: 15rpx;
    }
    
    &__label {
      &__desc {
        line-height: 35rpx;
        font-size: 28rpx;
      }
    }
    
    &__count-icon {
      font-size: 24rpx;
      padding-right: 5rpx;
    }
  }
  
  .image-book{
    padding: 150rpx 0rpx;
    font-size: 16rpx;
    font-weight: 300;
    position: relative;
  }
  .image-picbook{
    background-size: cover;
    background-repeat:no-repeat;
    background-position:top;
    border-radius: 15rpx 15rpx 0 0;
    height: 300rpx;
  }
  
  /* 毛玻璃效果 */
  .dd-glass {
     width: 100%;
     backdrop-filter: blur(20rpx);
    -webkit-backdrop-filter: blur(20rpx);
  }
  
  /* 文本超出隐藏 */
  .tn-line-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }
</style>